<template>
  <div>
    <p>多选题 选项：(以下选中的选项为正确答案)</p>
    <el-checkbox-group v-model="checkList" class="mycheckbox" @change="checkboxChange">
      <el-checkbox v-for="item in List" :key="item.id" :label="item.id">{{item.title}}</el-checkbox>
    </el-checkbox-group>
  </div>
</template>

<script>
export default {
  name: "Checkbox",
  props: {
    List: {
      type: Array,
      default: () => []
    },
    checkboxChoose: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      checkList: this.checkboxChoose
    };
  },
  watch: {
    // 深度监听，及时赋值给data
    checkboxChoose: {
      handler(newval, oldval) {
        this.checkList = this.checkboxChoose;
      },
      immediate: true
    }
  },
  methods: {
    checkboxChange() {
      // 当选项改变时，及时将data的选项调整过来。保证选中项永远不变
      this.checkList = this.checkboxChoose
    }
  }
};
</script>

<style scoped>
.mycheckbox {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 130px;
}
</style>